<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script src="/html/ajax.js"></script>
</head>
<script>

    window.onload = function () {
        findCountry();
    }

    async function findCountry() {
        let info = await ajaxGet("/country/findAll");
        let str = "";
        for (let i = 0; i < info.length; i++) {
            let countryObj = info[i];
            console.log(countryObj.countryId);
            str += `<option value="${countryObj.countryId}">${countryObj.countryName}</option>`;
        }
        $("countrySelect").innerHTML = str;
        findCity();
    }


    function $(id) {
        return document.getElementById(id);
    }


    async function findCity() {
        let info = await ajaxGet("/city/findByCountryId", {countryId: $("countrySelect").value});
        let str = "";
        for (let i = 0; i < info.length; i++) {
            let cityObj = info[i];
            str += `<option value="${cityObj.cityId}">${cityObj.cityName}</option>`;
        }
        $("citySelect").innerHTML = str;
    }

</script>

<body>
<select name="countrySelect" id="countrySelect" style="margin: 10px;width: 100px;text-align: center"
        onchange="findCity()"></select>

<select name="citySelect" id="citySelect" style="margin: 10px;width: 100px;text-align: center"></select>


</body>
</html>